<template>
  <div style="background-color: saddlebrown">

    <div class="htop">
      <div style="padding-top: 100px">
        <div
            style="background-color: rgba(0, 0, 0, 0.6);width: 800px;margin-left: 350px;height: 100px;opacity: 1;border-radius: 20px;">
          <div style="padding-bottom: 50px;padding-top: 28px;width: 700px;margin-left: 50px;display: flex;opacity: 1">
            <el-input v-model="input" placeholder="搜目的地/攻略/游记" style="opacity: 1"></el-input>
            <el-button icon="el-icon-search" style="margin-left: 2px;opacity: 1;border-radius: 20px;"></el-button>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-left: 250px;width: 1100px;margin-top: 50px">

      <div><span style="color: white">热门景点</span>
        <el-button type="mini"
                   style="font-size: 10px;margin-left: 10px;background-color: saddlebrown;border-color: white;color: white">
          <i class="el-icon-menu"></i>
          筛选
        </el-button>
        <el-button type="primary"
                   style="font-size: 10px;margin-left: 840px;background-color: saddlebrown;border-color: white;color: white">
          <i class="el-icon-video-camera"></i>
          创作Vlog
        </el-button>
      </div>

      <el-divider></el-divider>


      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in pic" :key="item">
          <img :src="item.picture" alt=""/>
        </el-carousel-item>
      </el-carousel>

<!--      <el-button @click="change" type="mini"-->
<!--                 style="margin-left: 1020px;background-color: saddlebrown;border-color: white;color: white">-->
<!--        <i class="el-icon-refresh-right"></i>-->
<!--        换一换-->
<!--      </el-button>-->

      <div style="margin-top: 50px">

        <span style="color: white">热门攻略</span>

        <el-button type="mini"
                   style="font-size: 10px;margin-left: 10px;background-color: saddlebrown;border-color: white;color: white">
          <i class="el-icon-menu"></i>
          筛选
        </el-button>

        <span style="color:white;margin-left: 10px">最新发表</span>

        <el-button type="primary"
                   style="font-size: 10px;margin-left: 780px;background-color: saddlebrown;border-color: white;color: white" @click="gocreate">
          <i class="el-icon-video-camera"></i>
          写攻略
        </el-button>

      </div>

      <el-divider></el-divider>
      <div v-for="(item,index) in bottom" :key="item">
        <div style="display: flex;margin-top: 30px">
          <div style="width: 25%;height: 190px"><img :src="item.picture" alt=""/></div>
          <div style="color: white;margin-left: 10px;width: 788px">
            <div style="font-size: 20px;" class="Article_item_title">{{ item.title }}</div>
            <div style="margin-top: 15px;font-size: 14px;color:rgb(199, 196, 196); " class="Article_item_details">

              {{ item.content }}
            </div>
            <div style="margin-top: 110px;font-size: 13px;">
              <span style="margin-right: 10px">{{ item.place }}</span>
              /<span style="margin-right: 10px">{{ item.time }}</span><span style="margin-right: 5px">浏览</span><span>.{{
                item.visitor
              }}</span>
            </div>
          </div>
<!--          <div class="Stratety_item_islike" @click="changeLike(index)">-->
<!--            <img src="../assets/unlike.png" style="width: 40px;height: 40px;margin-top: 150px" v-if="!islike">-->
<!--            <img src="../assets/like.png" style="width: 40px;height: 40px;margin-top: 150px" v-else>-->
<!--          </div>-->

        </div>


      </div>
      <el-button type="mini"
                 style="margin-left: 500px;margin-top: 50px;background-color: saddlebrown;border-color: white;color: white" @click="go">
        更多>>
      </el-button>
    </div>


    <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
  </div>
</template>

<script>

export default {
  data() {
    return {
      pic: [{picture:'',place:''},{picture:'',place:''},{picture: '',place:''},{picture:'',place:''},{picture: '',place:''}],
      allstrategy:[],
      sc: 1,
      sl: 1,
      islike: false,
      screenWidth: 0,
      bottom: []
    }
  },
  created() {
    this.showhot()
    window.scrollTo(0,0);
    this.showStrategy()
  },
  methods: {
    showhot(){
      this.$axios.get("http://localhost:9080/strategy/showhot").then(res=>res.data).then(res=>{
        console.log(res)
        this.allstrategy=res

        for(let i=0;res[i]!=undefined;i++){
          this.pic[i].picture=require("@/assets/create/"+res[i].picture)
          this.pic[i].place=res[i].place
        }
      })
      console.log("热门")
      console.log(this.pic)
      console.log("热门")
    },
    showStrategy() {
      this.$axios.get("http://localhost:9080/strategy/strategy").then(res => res.data).then(res => {
        this.bottom = res
        for(let i=0;i<this.bottom[i]!=undefined;i++){
          this.bottom[i].picture=require('@/assets/create/'+this.bottom[i].picture)
        }
      })
    },
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
    change() {

    },
    changeLike(index) {
      this.bottom[index].islike = !this.bottom[index].islike;
    },
    go(){
      this.$router.push({path:"/head/strategy"})
    },
    gocreate(){
      this.$router.push({path:"/head/center/create"})
    }


  },


  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    }


  }


}
</script>

<style>
.htop {
  background: url("../assets/header.png") no-repeat center;

  width: 100%;
  height: 400px;

}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;

}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

img {
  /*设置图片宽度和浏览器宽度一致*/
  width: 100%;
  height: inherit;
}

.Article_item_title:hover, .Article_item_details:hover {
  text-decoration: underline;
  cursor: pointer;
}

.Stratety_item_islike:hover {
  cursor: pointer;
  transform: scale(1.05);
}
</style>